<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>特色化案例库</title>

  <script src="/jquery.js"></script>

  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <script src="/md5.js"></script>
  <script src="/vue.js"></script>
  <script src="/httpVueLoader.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/axios.js"></script>

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      min-width: 1200px;
    }

    .page-header {
      height: 50px;
    }

    .panel {
      margin-top: 200px;
      height: 648px;
      width: 1200px;
      margin: 0 auto;
    }

    .panel-heading {
      height: 30%;
      padding: 3px;
    }

    .panel-body {
      height: 70%;
      padding: 3px
    }

    .table-bordered>tbody>tr>th,
    .table-bordered>tbody>tr>td {
      border: solid 1px rgb(93, 156, 213);
      vertical-align: middle;
      background-color: rgb(189, 215, 238);
    }

    .table-bordered>tbody>tr>td {
      background-color: rgb(234, 239, 247);
    }


    td>div>img {
      max-height: 390px;
    }

    .el-drawer__wrapper {
      width: 15%;
      text-align: center;
    }

    input[name="title"] {
      float: left;
      border: 0;
      height: 30px;
      font-size: 15px;
    }

    input[name="title"]:focus {
      outline: none;
    }

    th input,
    td input {
      border: 0;
      font-size: 14px;
      background-color: transparent;
    }

    td input:focus {
      outline: none;
    }

    th input:focus {
      outline: none;
    }

    #pictb {
      background-color: rgb(234, 239, 247);
      border: solid 1px black;

    }

    #pictb>tbody>tr>th {
      background-color: rgb(210, 222, 239);
      border: solid 1px white;
    }


    #mytable>tbody>tr>th,
    #mytable>tbody>tr>td {
      padding: 0px;
      font-size: 13px;
    }

    #pictb>tbody>tr>td {
      border: solid 1px white;
      font-size: 13px;
    }


    .el-upload {
      margin: 0 auto;
      margin-top: 10px;
    }

    #myModal {
      height: 300px;
    }

    textarea {
      border: none;
      background-color: rgb(234, 239, 247);
    }

    textarea:focus {
      outline: none;
    }

    .el-image {
      margin: 10px;
    }


    .el-input__inner {
      background-color: rgb(234, 239, 247);
      border: 0;
      outline: 0;
      height: auto;
    }

    .el-upload input {
      display: none;
    }

    #selcontainer {
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="main" style="width: 100%;height: 120%;">

    <div class="page-header">
      <sidebar @changepage="changepage" ref="mysidebar" type="2"></sidebar>
      <input name="title" placeholder="请输入标题" :value="info.title" @change="autosave"
        style="position:relative;left:10%;font-size:25px;" />
      <div style="width:150px;display: inline;float:right;">
        <el-slider :min="80" v-model="value_bar" style="width:80%;display:inline"></el-slider>
      </div>


      <span style="float: right; margin-right:5%">
        <!--
                <div style="display: inline;">
                    <el-color-picker v-model="color1" style="display: inline;"></el-color-picker>
                    <el-color-picker v-model="color2" style="display: inline;"></el-color-picker>
                </div>
            -->
        <button v-if="owner==username" class="btn btn-danger" type="button" @click="deletePage"><span
            class="glyphicon glyphicon-trash"></span></button>
        <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-menu-down"
            @click="addtonext">新建同类型案例</span></button>
        <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-plus"
            @click="addtoend">新增到尾部</span></button>
        <button class="btn btn-default" type="button" @click="showlast"><span
            class="glyphicon glyphicon-chevron-left"></span></button>
        <button class="btn btn-default" type="button" @click="shownext"><span
            class="glyphicon glyphicon-chevron-right"></span></button>
        <el-tooltip class="item" effect="dark" content="导出" placement="top">
          <button class="btn btn-primary" type="button" @click="export_pptx"><span
              class="glyphicon glyphicon-export"></span></button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="填写说明" placement="top">
          <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#picmodal"><span
              class="glyphicon glyphicon-picture"></span></button>
        </el-tooltip>

        <div id="picmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <el-image src="/instruction.jpg"></el-image>
            </div>
          </div>
        </div>

        <!--
                <el-tooltip class="item" effect="dark" content="保存" placement="top">
                    <button class="btn btn-primary" type="button" @click="save"><span
                            class="glyphicon glyphicon-floppy-save"></span></button>
                </el-tooltip>
            -->
        <a v-if="isppt" :href="task_name+'/downloadppt'">PPTX</a>
        <a v-if="isppt" :href="task_name+'/downloadxls'">XLS</a>
      </span>

    </div>
    <ul class="breadcrumb" style="text-align: center;">
      <li><a href="/">首页</a></li>
      <li>{{owner}}</li>
      <li>{{task_name}}</li>
      <li class="active">第
        <select v-if="$refs.mysidebar!=null" @change="selectpage" id="select-page" :value="currentPage">
          <option v-for="(t,i) in $refs.mysidebar.data" :value="i+1">{{i+1}}</option>
        </select>
        页
      </li>
    </ul>

    <div class="panel panel-default" id="panel-table">
      <div class="panel-heading">
        <table id="mytable" class="table table-striped table-bordered" style="height: 100%;width: 100%;margin:0">
          <tbody style="height: 100%;">
            <tr style="height:15%;width: 100%;">
              <!--1-->
              <th style="width: 8%;" @click="selectCaseNum">案例编号</th>
              <td style="width: 12%;" @click="selectCaseNum" name="case-num"></td>
              <th style="width: 8%;" rowspan="2">产品名称</th>
              <td style="width:12%" rowspan="2">
                <!--<input name="name" placeholder="请输入" style="width: 100%;" @change="autosave"
                                    :value="info.name" />-->
                <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
                  @select="handleSelect">
                </el-autocomplete>
              </td>
              <th style="width: 8%;" rowspan="2">版本号</th>
              <td colspan="3" rowspan="2" style="width:32%">
                <el-autocomplete v-model="ver" :fetch-suggestions="querySearchAsyncVer" placeholder="请输入内容"
                  @select="autosave" @change="autosave">
                </el-autocomplete>
              </td>
              <th style="width: 8%;">记录日期</th>
              <td style="width: 12%;">{{info.date}}</td>
            </tr>
            <tr style="height:15%;width: 100%;">
              <th style="width: 8%;" @click="selectCaseNum">产品分类</th>
              <td style="width: 12%;" @click="selectCaseNum">{{product_class}}
              </td>
              <th style="width: 8%;">记录人</th>
              <td style="width: 12%;" name="recorder">{{info.recorder}}
              </td>
            </tr>
            <tr style="height:15%;width: 100%;">
              <th style="width: 8%;">特色类型</th>
              <td style="width: 12%;">{{info.feature}}</td>
              <th rowspan="2" style="width: 8%;">特色摘要</th>
              <td colspan="3" rowspan="2" style="width:32%">
                <textarea name="abstract" placeholder="请输入" style="width: 100%;resize:none" @change="autosave"
                  :value="info.abstract"></textarea>
              </td>
              <th rowspan="2" style="width: 8%;">关键词</th>
              <td colspan="3" rowspan="2" style="width:32%;"><input name="idea" placeholder="请输入" style="width: 100%;"
                  @change="autosave" :value="info.idea" />
              </td>
            </tr>
            <tr style="height:15%;width: 100%;">
              <th style="width: 8%;">案例页数</th>
              <td style="width: 12%;" name="page-num"></td>
            </tr>

            <tr style="height: 30%;width: 100%;">
              <th style="width:8%;color:white;background-color:rgb(91,155,213);border:white 2px solid;">
                详细描述
              </th>
              <td colspan="9" style="width: 92%;background-color:rgb(91,155,213);border:white 2px solid;">
                <textarea name="detail" placeholder="请输入"
                  style="width: 100%;color: white;resize:none;background-color:rgb(91,155,213)" @change="autosave"
                  :value="info.detail"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="panel-body">
        <table id="pictb" style="width: 100%;height:100%">
          <tr style="height: 10.5%;">
            <th style="width: 20%;"><input id="img-title0" v-model="info.pics[0].title" style="width: 100%;"
                @change="autosave" /></th>
            <th style="width: 20%;"><input id="img-title1" v-model="info.pics[1].title" style="width: 100%;"
                @change="autosave" /></th>
            <th style="width: 20%;"><input id="img-title2" v-model="info.pics[2].title" style="width: 100%;"
                @change="autosave" /></th>
            <th style="width: 20%;"><input id="img-title3" v-model="info.pics[3].title" style="width: 100%;"
                @change="autosave" /></th>
            <th style="width: 20%;"><input id="img-title4" v-model="info.pics[4].title" style="width: 100%;"
                @change="autosave" /></th>
          </tr>
          <tr style="height: 89%;">
            <td style="width: 20%;text-align: center;" class="img-container" @dragover="allowDrop($event)"
              @drop="drop($event)">
              <el-image id="img0" @change="autosave" draggable="true" @dragstart="drag($event)"
                :src="info.pics[0].path.slice(0,5)=='blob:'?info.pics[0].path:(info.pics[0].path==''?'':('/'+info.pics[0].path))"
                :preview-src-list="preview_list">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>

            </td>
            <td style="width: 20%;text-align: center;" class="img-container" @dragover="allowDrop($event)"
              @drop="drop($event)">

              <el-image id="img1" @change="autosave" draggable="true" @dragstart="drag($event)"
                :src="info.pics[1].path.slice(0,5)=='blob:'?info.pics[1].path:(info.pics[1].path==''?'':('/'+info.pics[1].path))"
                :preview-src-list="preview_list">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </td>
            <td style="width: 20%;text-align: center;" class="img-container" @dragover="allowDrop($event)"
              @drop="drop($event)">

              <el-image id="img2" @change="autosave" draggable="true" @dragstart="drag($event)"
                :src="info.pics[2].path.slice(0,5)=='blob:'?info.pics[2].path:(info.pics[2].path==''?'':('/'+info.pics[2].path))"
                :preview-src-list="preview_list">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </td>
            <td style="width: 20%;text-align: center;" class="img-container" @dragover="allowDrop($event)"
              @drop="drop($event)">

              <el-image id="img3" @change="autosave" draggable="true" @dragstart="drag($event)"
                :src="info.pics[3].path.slice(0,5)=='blob:'?info.pics[3].path:(info.pics[3].path==''?'':('/'+info.pics[3].path))"
                :preview-src-list="preview_list">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </td>
            <td style="width: 20%;text-align: center;" class="img-container" @dragover="allowDrop($event)"
              @drop="drop($event)">

              <el-image id="img4" @change="autosave" draggable="true" @dragstart="drag($event)"
                :src="info.pics[4].path.slice(0,5)=='blob:'?info.pics[4].path:(info.pics[4].path==''?'':('/'+info.pics[4].path))"
                :preview-src-list="preview_list">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </td>
          </tr>
        </table>
        <div id="imgsel" style="position: relative; top:20px;height:100px;padding: 10px;">
          <!--
          <div style="width: 20%;display: inline;float: left;text-align:center">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span>
            </el-button>
            <el-button type="info" size="small" @click="copy" circle><span class="glyphicon glyphicon-paste"></span>
            </el-button>
          </div>
          <div style="width: 20%;display: inline;float: left;text-align:center">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span>
            </el-button>
            <el-button type="info" size="small" @click="copy" circle><span class="glyphicon glyphicon-paste"></span>
            </el-button>
          </div>

          <div style="width: 20%;display: inline;float: left;text-align:center">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
            <el-button type="info" size="small" @click="copy" circle><span class="glyphicon glyphicon-paste"></span>
            </el-button>
          </div>

          <div style="width: 20%;display: inline;float: left;text-align:center">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
            <el-button type="info" size="small" @click="copy" circle><span class="glyphicon glyphicon-paste"></span>
            </el-button>
          </div>

          <div style="width: 20%;display: inline;float: left;text-align:center">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
            <el-button type="info" size="small" @click="copy" circle><span class="glyphicon glyphicon-paste"></span>
            </el-button>
          </div>
        -->
          <el-checkbox-group v-model="checkList" @change="check_list_change">
            <el-checkbox label="首页"></el-checkbox>
            <el-checkbox label="财富"></el-checkbox>
            <el-checkbox label="生活服务"></el-checkbox>
            <el-checkbox label="我的"></el-checkbox>
            <el-checkbox label="非金融(社区/资讯/权益)"></el-checkbox>
            <el-checkbox label="公共组件"></el-checkbox>
            <el-checkbox label="其他"></el-checkbox>
          </el-checkbox-group>
          <el-input v-if="show_reason" type="textarea" autosize v-model="reason" resize="none" placeholder="请输入理由"
            @change="autosave">
          </el-input>
          <div style="width: 100%;height:70px">
            <div style="width: 50%;display:inline-block">
              <el-upload ref="upload"
                :data="{app:state,ver:ver,innovation:info.feature,page:currentPage,type:2,user:owner,task:task_name}"
                action="/posts/" :auto-upload="false" :file-list="fileList" list-type="picture"
                accept=".jpg,.png,.jpeg,.gif" :on-change="files_change" :on-success="afterupload" multiple>
                <el-button slot="trigger" size="small">选取文件</el-button>
                <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器
                </el-button>
                <div class="el-upload__tip" slot="tip">只能上传jpg/jpeg/png/gif文件</div>
              </el-upload>
            </div>
            <div
              style="width:50%;height:100%;display:inline-block;border:dashed 2px grey;position:absolute;text-align:center;"
              @dragover="allowDrop($event)" @drop="drop($event)">
              <div>
                <i class=" el-icon-delete" style="font-size: 30px;position:absolute;top:30px;color:red"></i>
              </div>
              <div>
                <span>拖动到此处删除图片</span>
              </div>
            </div>
          </div>

          <span style="color: red;">*拖动图片可调整顺序</span>
        </div>
      </div>
    </div>

    <!--
    <div class="modal fade" id="selcontainer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
      <div class="modal-dialog" role="document" style="width: 100%;">
        <div class="modal-content" style="width: 95%;">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <div style="width:100%;text-align:center">
              <h4 class="modal-title" id="myModalLabel1">请选择</h4>
              <span style="color:red">按住ctrl可同时上传多张图片</span>
            </div>

          </div>
          <div class="modal-body" style="width: 100%;">
            <picupload :page="currentPage" :index="whichtoupload" :type="2" position="ppt" :product_name="state"
              :ver="ver" :inno="info.feature" ref="myuploader" @disabled="setdisabled"
              @afterupload="changepage(currentPage)" style="width: 90%;">
            </picupload>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="upload"
              :disabled="disable_upload">上传</button>
          </div>
        </div>
      </div>
    </div>
  -->

    <!--模态框 选择案例分类-->
    <div class="modal fade" id="case-class-container" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel2">请选择</h4>
          </div>
          <div class="modal-body">
            <el-select v-model="caseclass">
              <el-option value="G" label="G.功能创新"></el-option>
              <el-option value="C" label="C.产品创新"></el-option>
              <el-option value="S" label="S.视觉创新"></el-option>
              <el-option value="J" label="J.交互创新"></el-option>
              <el-option value="T" label="T.技术创新"></el-option>
              <el-option value="Y" label="Y.营销创新"></el-option>
            </el-select>
            <el-cascader :value="product_class" :options="options" :props="{ expandTrigger: 'hover' }"
              @change="change_cas" :show-all-levels="false"></el-cascader>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="confirmCaseNum">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!--<imgbrowser @choosepic="setpic"></imgbrowser> -->

  </div>



</body>

<script>
  var app = new Vue({
    el: "#main",
    components: {
      "sidebar": httpVueLoader("/sidebar.vue"),
      "imgbrowser": httpVueLoader("/imgbrowser.vue"),
      "picupload": httpVueLoader("/pics.vue")
    },
    data: {
      info: {
        pics: [{ order: 0, path: "" }, { order: 1, path: "" }, { order: 2, path: "" }, { order: 3, path: "" }, { order: 4, path: "" }]
      },
      task_name: null,
      owner: null,
      currentPage: 1,
      whichtoupload: 0,
      selvalue: {},
      isppt: false,
      caseclass: 'G',
      caseNum: null,
      product_class: '个人手机银行',
      apps: [],
      vers: [],
      state: '',
      ver: '',
      preview_list: [],
      showAddVerBtn: false,
      timeout: null,
      disable_upload: true,
      special_type: {
        "G": "功能创新",
        "S": "视觉创新",
        "C": "产品创新",
        "J": "交互创新",
        "T": "技术创新",
        "Y": "营销创新"

      },
      value_bar: 100,
      options: [{ value: '个人手机银行', label: '个人手机银行' },
      { value: '企业手机银行', label: '企业手机银行' },
      { value: '个人网银', label: '个人网银' },
      { value: '企业网银', label: '企业网银' },
      { value: '直销银行', label: '直销银行' },
      { value: '信用卡', label: '信用卡' },
      { value: '移动展业', label: '移动展业' },
      { value: '互联网', label: '互联网' },
      { value: '微信小程序/公众号', label: '微信小程序/公众号' },
      { value: '保险', label: '保险' },
      { value: '证券', label: '证券' },
      { value: '互联网金融', label: '互联网金融' },
      { value: '其他金融', label: '其他金融' },
      {
        value: '非金融', label: '非金融', children: [
          { value: '视频音乐', label: '视频音乐' },
          { value: '社交', label: '社交' },
          { value: '办公', label: '办公' },
          { value: '娱乐', label: '娱乐' },
          { value: '实用工具', label: '实用工具' },
          { value: '资讯', label: '资讯' },
          { value: '摄影美图', label: '摄影美图' },
          { value: '购物', label: '购物' },
          { value: '出行', label: '出行' },
          { value: '教育', label: '教育' },
          { value: '健康', label: '健康' },
          { value: '居住', label: '居住' }
        ]
      },
      ],
      fileList: [],
      show_reason: false,
      reason: '',
      checkList: [],
      uploadObj: {}

      //color1: '#BDD7EE',
      //color2: '#EE9BD5'
    },
    created: function () {
      this.owner = decodeURI(window.location.pathname.split("/")[1]);
      this.task_name = decodeURI(window.location.pathname.split("/")[2]);
      this.changepage(1);
      axios.get("/getbv").then(res => {
        this.apps = res.data;
      });
    },
    computed: {
      /*cookie中用户名*/
      username: function () {
        var arr, reg = new RegExp("(^| )username=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
          return decodeURI(arr[2]);
        else
          return null;
      }
    },
    watch: {
      value_bar: function () {
        let ratio = this.value_bar / 100;
        let height = 648;
        let width = 1200;
        width *= ratio;
        height *= ratio;
        $("#panel-table").css("height", height.toFixed(2) + "px");
        $("#panel-table").css("width", width.toFixed(2) + "px");
      },
      ver: function () {
        this.showAddVerBtn = !this.isVerInVers();
      },
      /*
      color1: function (color) {
            $("th").css('background-color', this.color1);
      },
          color2: function (color) {
            $("td").css('background-color', this.color2);
          $("textarea").css('background-color', this.color2);
          $("input").css('background-color', this.color2);

      }
          */
    },
    methods: {
      showlast: function () {
        if (this.currentPage > 1) {
          this.changepage(--this.currentPage);
          this.$refs.mysidebar.changeItemColor(this.currentPage);
        }
      },
      shownext: function () {
        if (this.currentPage < this.$refs.mysidebar.data.length) {
          this.changepage(++this.currentPage);
          this.$refs.mysidebar.changeItemColor(this.currentPage);
        }
      },
      changepage: function (value) {
        let task_type;
        if (document.title === '竞品分析')
          task_type = 1;
        else if (document.title === '特色化案例库')
          task_type = 2;
        else if (document.title === '评测报告')
          task_type = 3;
        axios.get(`${this.task_name}?p=${value}&type=${task_type}`).then(res => {
          let obj = new Object();
          obj.caseclass = res.data.caseclass;
          obj.title = res.data.title;
          obj.case_num = res.data.case_num;
          obj.product_class = res.data.product_class;
          obj.name = res.data.name;
          obj.version = res.data.version;
          obj.app_class = res.data.app_class;
          obj.date = res.data.date;
          obj.feature = res.data.feature;
          obj.abstract = res.data.abstract;
          obj.page_num = res.data.page_num;
          obj.detail = res.data.detail;
          obj.idea = res.data.idea;
          obj.recorder = res.data.recorder;
          obj.pics = res.data.pics;
          obj.pics = [{ order: 0, path: "" }, { order: 1, path: "" }, { order: 2, path: "" }, { order: 3, path: "" }, { order: 4, path: "" }];
          if (res.data.pics != undefined) {
            for (let pic of res.data.pics) {
              obj.pics[pic.order - 1].path = pic.path;
              obj.pics[pic.order - 1].title = pic.title;
            }
          }
          this.caseclass = res.data.caseclass;
          this.product_class = res.data.product_class;
          this.state = res.data.name;
          this.ver = res.data.version;
          this.getVers();
          $("td[name='page-num']").text(obj.page_num);
          $("td[name='case-num']").text(obj.case_num);
          this.caseNum = obj.case_num;
          this.info = obj;
          this.currentPage = value;
          if (res.data.checkList === "") {
            this.checkList = [];
          } else {
            let len = res.data.checkList.length;
            let str = res.data.checkList.slice(1, len - 1);
            let strs = str.split(",");
            for (let i in strs) {
              strs[i] = strs[i].slice(1, strs[i].length - 1);
            }
            this.checkList = strs;
            for (let item of strs) {
              if (item === '其他') {
                this.show_reason = true;
              }
            }
          }
          this.reason = res.data.reason;
          for (let i = 0; i < 5; i++) {
            if (this.info.pics[i].path != '') {
              this.preview_list.push('/' + this.info.pics[i].path);
            }
          }

        })
      },
      isVerInVers: function () {
        if (this.ver == '')
          return true;
        for (let t of this.vers) {
          if (t.value == this.ver)
            return true;
        }
        return false;
      },
      addtoend: function () {
        this.$refs.mysidebar.addtoend();
      },
      addtonext: function () {
        if ($("td[name='case-num']").text() == "") {
          this.$message.error('请先选择案例类型');
          return;
        }
        this.$refs.mysidebar.addtonext(this.info.case_num, this.info.page_num, this.special_type[this.caseclass]);
        let page_nums = this.info.page_num.split("/");
        this.info.page_num = page_nums[0] + "/" + (parseInt(page_nums[1]) + 1);
        $("td[name='page-num']").text(this.info.page_num);
      },
      deletePage: function () {
        this.$confirm('确定要删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.$refs.mysidebar.data.length > 1) { //总页数大于1才能删除
            axios.post(`${this.task_name}/deletepage?p=${this.currentPage}&case_num=${this.caseNum}`).then(res => {
              this.$refs.mysidebar.get_pages();
              if (this.currentPage > 1) {
                this.changepage(--this.currentPage);
                this.$refs.mysidebar.changeItemColor(this.currentPage);
              } else {
                this.changepage(this.currentPage);
              }
              this.$message({
                type: 'success',
                message: '删除成功!',
                duration: 1000
              });
            });
          }
          else {
            this.$message.error('删除失败，当前任务只有1页');
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      showlast: function () {
        if (this.currentPage > 1) {
          this.changepage(--this.currentPage);
          this.$refs.mysidebar.changeItemColor(this.currentPage);
        }
      },
      shownext: function () {
        if (this.currentPage < this.$refs.mysidebar.data.length) {
          this.changepage(++this.currentPage);
          this.$refs.mysidebar.changeItemColor(this.currentPage);
        }
      },
      autosave: function () {
        this.info.recorder = this.username;
        $.ajax({
          type: 'POST',
          url: `${this.task_name}/autosave?p=${this.currentPage}&type=2`,
          data: {
            caseclass: this.caseclass,
            title: $("input[name='title']").val(),
            case_num: $("td[name='case-num']").text(),
            product_class: this.product_class,
            name: this.state,
            version: this.ver,
            app_class: $("input[name='app-class']").val(),
            feature: this.info.feature,
            abstract: $("textarea[name='abstract']").val(),
            page_num: $("td[name='page-num']").text(),
            detail: $("textarea[name='detail']").val(),
            idea: $("input[name='idea']").val(),
            recorder: this.info.recorder,
            imgtitle0: this.info.pics[0].title,
            imgpath0: '/' + this.info.pics[0].path,
            imgtitle1: this.info.pics[1].title,
            imgpath1: '/' + this.info.pics[1].path,
            imgtitle2: this.info.pics[2].title,
            imgpath2: '/' + this.info.pics[2].path,
            imgtitle3: this.info.pics[3].title,
            imgpath3: '/' + this.info.pics[3].path,
            imgtitle4: this.info.pics[4].title,
            imgpath4: '/' + this.info.pics[4].path,
            checkList: JSON.stringify(this.checkList),
            reason: this.show_reason ? this.reason : ''
          },
          success: () => {
            this.$message({
              type: 'success',
              message: '自动保存',
              duration: 1000
            });
            this.changepage(this.currentPage);
            this.$refs.mysidebar.get_pages();
          }
        })
      },
      beforeUpload: function (event) {
        $("#selcontainer").modal();
        if (event.target.tagName == 'SPAN') {
          this.whichtoupload = $(event.target).parents('button').index('.el-button--primary');

        }
        else {
          this.whichtoupload = $(event.target).index('.el-button--primary');
        }
      },
      selchange: function (value) {
        this.selvalue.func = value[0];
        this.selvalue.bank = value[1][0];
        this.selvalue.ver = value[1][1];
      },
      upload: function () {
        this.$refs.myuploader.submitUpload();
        //this.info.pics[this.whichtoupload].path = this.$refs.myuploader.$refs.myupload.fileList[0].url;
        this.$message({
          type: 'success',
          message: '自动保存',
          duration: 1000
        });
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      sleep: function (milli) {
        let start = new Date().getTime();
        while (new Date().getTime() < start + milli) { }
        return;
      },
      openBrowser: function (event) {
        $("#myModalimgb").modal();
        if (event.target.tagName == 'SPAN') {
          this.whichtoupload = $(event.target).parents('button').index('.el-button--success')
        }
        else {
          this.whichtoupload = $(event.target).index('.el-button--success');
        }
      },
      setpic: function (val) {
        this.info.pics[this.whichtoupload].path = val;
        $("#myModalimgb").modal('hide');
        this.autosave();
      },
      dropimg: function (event) {
        //if (event.target.tagName == 'SPAN') {
        //  this.whichtoupload = $(event.target).parents('button').index('.el-button--danger');
        //}
        //else {
        //  this.whichtoupload = $(event.target).index('.el-button--danger');
        //}
        //$("#img" + this.whichtoupload).attr('src', '');
        //$("#img-title" + this.whichtoupload).val('');
        //this.info.pics[this.whichtoupload].path = '';
        //this.autosave();
      },
      export_pptx: function () {
        axios.get(`${this.task_name}/export?type=2`).then(res => {
          if (res.data == 1) {
            this.$message({
              message: '导出成功',
              type: 'success'
            });
            this.isppt = true;

          } else {
            this.$message.error('导出失败');
          }
        });
      },
      save: function () {
        this.autosave();
      },
      selectCaseNum: function () {
        $("#case-class-container").modal();
      },
      confirmCaseNum: function () {
        axios.get(`${this.task_name}/casepages?class=${this.caseclass}&current=${this.currentPage}`).then(res => {
          if ($("td[name='case-num']").text() == "" || $("td[name='case-num']").text().substring(0, 1) != this.caseclass) {
            let total = res.data.total + 1;
            let current = res.data.current + 1;
            let caseNum = this.caseclass + this.padding(current, 5);
            this.info.case_num = caseNum;
            this.info.page_num = current + '/' + total;
            $("td[name='case-num']").text(caseNum);
            this.caseNum = caseNum;
            $("td[name='page-num']").text(current + '/' + total);
            this.info.feature = this.special_type[this.caseclass];
          }
          this.autosave();
        });
      },
      padding: function (num, length) {
        if ((num + "").length >= length) {
          return num;
        }
        return this.padding("0" + num, length)
      },
      querySearchAsync(queryString, cb) {
        var apps = this.apps;
        var results = queryString ? apps.filter(this.createStateFilter(queryString)) : apps;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1500 * Math.random());
      },
      querySearchAsyncVer(queryString, cb) {
        var vers = this.vers;
        var results = queryString ? vers.filter(this.verFilter(queryString)) : vers;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1500 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      verFilter(queryString) {
        return (ver) => {
          return (ver.value.toLowerCase().indexOf(queryString.toLowerCase()) == 0);
        };
      },
      getVers: function () {
        if (this.state != '')
          axios.get(`/vers?app=${this.state}`).then(res => {
            this.vers = ((this.vers == null) ? [] : res.data);
            this.showAddVerBtn = !this.isVerInVers();
          });
        else
          this.vers = [];
      },
      handleSelect(item) {
        this.ver = '';
        this.getVers();
      },
      copy(e) {
        if (event.target.tagName == 'SPAN') {
          this.whichtoupload = $(event.target).parents('button').index('.el-button--info')
        }
        else {
          this.whichtoupload = $(event.target).index('.el-button--info');
        }
        this.$prompt('请复制图片链接', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*\.(jpg|png|jpeg)/,
          inputErrorMessage: '图片格式不正确'
        }).then(({ value }) => {
          let path = value.split("/")[3];
          this.info.pics[this.whichtoupload].path = path;
          this.autosave();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });

      },
      selectpage() {
        this.changepage($("#select-page").val());
        this.$refs.mysidebar.changeItemColor($("#select-page").val());
      },
      setdisabled(val) {
        this.disable_upload = val;
      },
      drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      },
      allowDrop(ev) {
        ev.preventDefault();
      },
      drop(ev) {
        let data = ev.dataTransfer.getData("text");
        let index1 = data.substring(3);      //源index
        let index2;
        if (ev.target.tagName == "TD") {
          index2 = $(".img-container").index($(ev.target));
        } else if (ev.target.tagName == 'IMG') {
          index2 = $(ev.target).attr("id").substring(3);       //目的index
        } else {    //删除图片
          $("#img" + index1).attr('src', '');
          $("#img-title" + index1).val('');
          this.info.pics[index1].path = '';
          this.autosave();
          return;
        }
        let src1 = $("#" + data).attr("src").substring(1);
        if ($(ev.target).children(":first").find("img") == undefined) {      //如果目的src为空
          this.info.pics[index1].path = "";
          this.info.pics[index2].path = src1;
        } else {
          [this.info.pics[index1].path, this.info.pics[index2].path] = [this.info.pics[index2].path, src1];
        }
        [this.info.pics[index1].title, this.info.pics[index2].title] = [this.info.pics[index2].title, this.info.pics[index1].title];
        ev.preventDefault();
        this.autosave();
      },
      change_cas(val) {
        this.product_class = val[val.length - 1];
      },
      files_change(file, fileList) {
        console.log(file, fileList)
        console.log(this.fileList);
      },
      check_list_change(val) {
        for (let item of val) {
          if (item === '其他') {
            this.show_reason = true;
          }
        }
        this.autosave();
      },
      afterupload() {
        var instance = this;
        setTimeout(function () {
          instance.changepage(instance.currentPage);
        }, 500);
      }

    },
  })
</script>

</html>